body {
    background: #dcf5ff;
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Nunito', sans-serif
}

.container {
    width: 30%;
    background: #fff;
    border-radius: 10px;

    .inner {
        background: rgb(7, 218, 165);
        padding: 1em;
        border-radius: 10px;
        width: calc(100% - 2em);
        clip-path: inset(0% 0% 0% 0%);
        transition: all .5s ease-in-out;
        cursor: pointer;

        

        

        &:hover span {
            color: rgba(255,255,255,0)
        }

        h1 {
            color: #fff;
            margin: 0;
        }

        p {
            color: #fff;
            font-size: .8rem;
        }
    }

    &:hover .inner {
        clip-path: inset(0% 50% 0% 0%);
        background: #00b6ff;
    }
}
